<template>
  <div class="container">
    <div class="column left">
      <el-button type="primary" @click="handleTransWeekNumber"
        >开始转换</el-button
      >
    </div>
    <div class="column middle">
      <pre>
        /**
        * 将星期数字数组转换为易读的文字描述
        * @param {number[]} days - 星期数字数组，范围 1~7
        * @returns {string} 转换后的文字描述
        */
        transWeekNumber(days) {
          if (!Array.isArray(days)) return '';

          // 星期数字到中文的映射
          const weekMap = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

          // 去重、排序
          const sortedDays = [...new Set(days)].sort((a, b) => a - b);

          // 如果包含所有七天，则直接返回“每天”
          if (sortedDays.length === 7) {
            return '每天';
          }

          const result = [];
          let start = sortedDays[0];
          let end = start;

          for (let i = 1; i 《 sortedDays.length; i++) {
            if (sortedDays[i] === end + 1) {
              end = sortedDays[i]; // 连续递增
            } else {
              // 不连续，处理当前段
              if (start === end) {
                result.push(weekMap[start - 1]);
              } else {
                result.push(`${weekMap[start - 1]}至${weekMap[end - 1]}`);
              }
              start = end = sortedDays[i];
            }
          }

          // 处理最后一个段
          if (start === end) {
            result.push(weekMap[start - 1]);
          } else {
            result.push(`${weekMap[start - 1]}至${weekMap[end - 1]}`);
          }

          return result.join('、');
        }
      </pre>
    </div>
    <div class="column right">
      <h3>原始数组：</h3>
      <pre>
        [1,3,5]
        [1,2,3,4,5]
        [1,2,4,5,6,7]
        [1,2,3,4,5,6,7]
      </pre>
      <h3>转换结果：</h3>
      <pre>{{ JSON.stringify(result, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: "ResponsiveLayout",
  data() {
    return {
      result: [], // 新增字段
    };
  },
  methods: {
    /**
     * 将星期数字数组转换为易读的文字描述
     * @param {number[]} days - 星期数字数组，范围 1~7
     * @returns {string} 转换后的文字描述
     */
    transWeekNumber(days) {
      if (!Array.isArray(days)) return "";

      // 星期数字到中文的映射
      const weekMap = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

      // 去重、排序
      const sortedDays = [...new Set(days)].sort((a, b) => a - b);

      // 如果包含所有七天，则直接返回“每天”
      if (sortedDays.length === 7) {
        return "每天";
      }

      const result = [];
      let start = sortedDays[0];
      let end = start;

      for (let i = 1; i < sortedDays.length; i++) {
        if (sortedDays[i] === end + 1) {
          end = sortedDays[i]; // 连续递增
        } else {
          // 不连续，处理当前段
          if (start === end) {
            result.push(weekMap[start - 1]);
          } else {
            result.push(`${weekMap[start - 1]}至${weekMap[end - 1]}`);
          }
          start = end = sortedDays[i];
        }
      }

      // 处理最后一个段
      if (start === end) {
        result.push(weekMap[start - 1]);
      } else {
        result.push(`${weekMap[start - 1]}至${weekMap[end - 1]}`);
      }

      return result.join("、");
    },

    handleTransWeekNumber() {
      const arr1 = [1, 3, 5];
      const arr2 = [1, 2, 3, 4, 5];
      const arr3 = [1, 2, 4, 5, 6, 7];
      const arr4 = [1, 2, 3, 4, 5, 6, 7];

      this.result.push(this.transWeekNumber(arr1));
      this.result.push(this.transWeekNumber(arr2));
      this.result.push(this.transWeekNumber(arr3));
      this.result.push(this.transWeekNumber(arr4));
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  overflow: hidden;
}

.column {
  box-sizing: border-box;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: left;
  overflow-y: auto;
}

/* 桌面端：三列 */
@media (min-width: 992px) {
  .column.left {
    width: 240px;
  }

  .column.middle {
    flex: 1;
  }

  .column.right {
    width: 300px;
  }
}

/* 平板端：两列 */
@media (min-width: 768px) and (max-width: 991px) {
  .column.left {
    width: 200px;
  }

  .column.middle {
    flex: 1;
  }

  .column.right {
    flex: 0 0 100%;
  }
}

/* 手机端：单列 */
@media (max-width: 767px) {
  .column {
    flex: 0 0 100%;
  }
}
</style>
